<template>
  <div>
    <div style="text-align: center">服务人员页面</div>
    <!-- 条件查询表单 -->
    <div style="text-align: left">
      <el-form :inline="true" :model="servePersonDTO" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            v-model="servePersonDTO.pname"
            placeholder="姓名"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="servePersonDTO.gender"
            placeholder="性别"
            style="width: 200px"
          >
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input
            v-model="servePersonDTO.age"
            placeholder="年龄"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="服务类型">
          <el-input
            v-model="servePersonDTO.servetype"
            placeholder="服务类型"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="负责区域">
          <el-input
            v-model="servePersonDTO.area"
            placeholder="负责区域"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="servePersonDTO.state"
            placeholder="状态"
            style="width: 200px"
          >
            <el-option label="服务中" value="服务中" />
            <el-option label="空闲" value="空闲" />
            <el-option label="离职申请" value="离职申请" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryServe">查询</el-button>
          <el-button type="primary" @click="resetServe">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 功能按键 -->
    <div style="text-align: left">
      <el-button type="primary" @click="addPopout">新增服务人员</el-button>
    </div>

    <!-- 数据展示 -->
    <div style="text-align: left">
      <el-table
        :data="servePersons"
        style="width: 100%"
        height="100%"
        align="center"
      >
        <el-table-column
          fixed
          label="工号"
          prop="jobnumber"
          :width="width"
          align="center"
        />
        <el-table-column
          fixed
          label="姓名"
          prop="pname"
          :width="width"
          align="center"
        />
        <el-table-column
          label="性别"
          prop="gender"
          :width="width"
          align="center"
        />
        <el-table-column
          label="年龄"
          prop="age"
          :width="width"
          align="center"
        />
        <el-table-column
          label="联系电话"
          prop="phone"
          width="150"
          align="center"
        />
        <el-table-column
          label="身份证号码"
          prop="idnumber"
          width="175"
          align="center"
        />
        <el-table-column
          label="开户银行"
          prop="bank"
          :width="width"
          align="center"
        />
        <el-table-column
          label="银行卡号"
          prop="banknumber"
          width="180"
          align="center"
        />
        <el-table-column
          label="服务类型"
          prop="servetype"
          :width="width"
          align="center"
        />
        <el-table-column
          label="负责区域"
          prop="area"
          :width="width"
          align="center"
        />
        <el-table-column
          label="服务人员状态"
          prop="state"
          width="180"
          align="center"
        >
          <template v-slot="scope">
            <el-tag
              :type="
                scope.row.state === '服务中'
                  ? 'primary'
                  : scope.row.state === '空闲'
                  ? 'success'
                  : 'danger'
              "
              disable-transitions
              >{{ scope.row.state }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="审核结果"
          prop="serveAudit.state"
          width="180"
          align="center"
        >
          <template v-slot="scope">
            <el-tag
              :type="
                scope.row.serveAudit.state === '驳回'
                  ? 'primary'
                  : scope.row.serveAudit.state === '无审核'
                  ? 'success'
                  : scope.row.serveAudit.state === '待审核'
                  ? 'warning'
                  : 'danger'
              "
              disable-transitions
              >{{ scope.row.serveAudit.state }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="150"
          align="center"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="modifyPopout(scope.row)"
            >
              修改信息
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="finishServe(scope.row)"
              v-if="scope.row.state === '服务中'"
            >
              完成服务
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="applyServe(scope.row.pid)"
              v-if="scope.row.state === '空闲'"
            >
              离职申请
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="revocationServe(scope.row)"
              v-if="scope.row.state === '离职审核'"
            >
              撤销申请
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控件 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pageIndex"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7]"
        layout="sizes, prev, pager, next, total"
        :total="total"
        align="center"
      >
      </el-pagination>
    </div>

    <!-- 添加和修改弹出框 -->
    <div>
      <el-dialog
        v-model="addAndModifyForm"
        :title="titlePopout"
        :width="formWidth"
        @close="cancelPopout"
      >
        <el-form :model="servePerson">
          <el-form-item label="姓名" :width="formWidth">
            <el-input v-model="servePerson.pname" placeholder="姓名" />
          </el-form-item>
          <el-form-item label="性别" :width="formWidth">
            <el-select
              v-model="servePerson.gender"
              :width="formWidth"
              placeholder="性别"
            >
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" :width="formWidth">
            <el-input v-model="servePerson.age" placeholder="年龄" />
          </el-form-item>
          <el-form-item label="联系电话" :width="formWidth">
            <el-input v-model="servePerson.phone" placeholder="联系电话" />
          </el-form-item>
          <el-form-item label="身份证号码" :width="formWidth">
            <el-input v-model="servePerson.idnumber" placeholder="身份证号码" />
          </el-form-item>
          <el-form-item label="开户银行" :width="formWidth">
            <el-input v-model="servePerson.bank" placeholder="开户银行" />
          </el-form-item>
          <el-form-item label="银行卡号" :width="formWidth">
            <el-input v-model="servePerson.banknumber" placeholder="银行卡号" />
          </el-form-item>
          <el-form-item label="服务类型" :width="formWidth">
            <el-input v-model="servePerson.servetype" placeholder="服务类型" />
          </el-form-item>
          <el-form-item label="负责区域" :width="formWidth">
            <el-input v-model="servePerson.area" placeholder="负责区域" />
          </el-form-item>
          <el-form-item label="服务人员状态" :width="formWidth" v-if="flag">
            <el-select
              v-model="servePerson.state"
              placeholder="状态"
              :width="formWidth"
            >
              <el-option label="服务中" value="服务中" />
              <el-option label="空闲" value="空闲" />
              <el-option label="离职申请" value="离职申请" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancelPopout">取消</el-button>
            <el-button type="primary" @click="addAndModifyServe">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formWidth: "50%",
      width: 100,
      servePersonDTO: {
        pname: "",
        gender: "",
        age: "",
        servetype: "",
        area: "",
        state: "",
      },
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      pages: 0,
      servePersons: [],
      servePerson: {},
      addAndModifyForm: false,
      titlePopout: "",
      flag: false,
    };
  },
  mounted() {
    this.getAll();
  },
  methods: {
    //完成服务
    finishServe(row) {
      this.$axios.put("/serveperson/finish/", row).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("完成服务");
          this.getAll();
        } else {
          this.$message.error("完成服务失败");
        }
      });
    },

    //取消弹框
    cancelPopout() {
      this.addAndModifyForm = false;
      this.servePerson = {};
    },

    //修改弹框
    modifyPopout(row) {
      console.log(row);
      this.titlePopout = "修改服务人员信息";
      this.servePerson = row;
      this.addAndModifyForm = true;
      this.flag = true;
    },

    //添加弹框
    addPopout() {
      this.titlePopout = "添加服务人员信息";
      this.addAndModifyForm = true;
      this.flag = false;
    },

    //添加和修改服务人员
    addAndModifyServe() {
      console.log(this.servePerson);
      if (this.titlePopout == "添加服务人员信息") {
        this.$axios.post("/serveperson/", this.servePerson).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.$alert(res.data.msg, "请牢记", {
              dangerouslyUseHTMLString: true,
            });
            this.getAll();
            this.cancelPopout();
          } else {
            this.$message.error("添加失败");
          }
        });
      } else if (this.titlePopout == "修改服务人员信息") {
        this.$axios.put("/serveperson/", this.servePerson).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.getAll();
            this.cancelPopout();
          } else {
            this.$message.error("修改失败");
          }
        });
      }
    },

    //离职申请
    applyServe(id) {
      console.log(id);
      this.$prompt("请输入离职原因", "离职申请", {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        inputPattern: /^.+$/, //判断是否输入了离职原因
        inputErrorMessage: "请填写离职原因",
      })
        .then(({ value }) => {
          this.$message.success(`离职申请已成功`);
          this.$axios
            .get("/serveperson/apply/" + id + "/" + value)
            .then((res) => {
              console.log(res.data);
              this.getAll();
            });
        })
        .catch(() => {
          this.$message.info("离职申请已取消");
        });
    },

    //撤销申请
    revocationServe(row) {
      console.log(row);
      this.$confirm("是否要撤销离职申请？", "撤销申请", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.$message.success(`撤销申请已成功`);
          this.$axios.put("/serveperson/revocation/", row).then((res) => {
            console.log(res.data);
            this.getAll();
          });
        })
        .catch(() => {
          this.$message.info("撤销申请已取消");
        });
    },

    //条件查询服务人员
    queryServe() {
      this.getAll();
    },

    //重置条件查询
    resetServe() {
      this.servePersonDTO = {
        pname: "",
        gender: "",
        age: "",
        servetype: "",
        area: "",
        state: "",
      };
      this.pageIndex = 1;
      this.pageSize = 3;
      this.getAll();
    },

    //查询全部服务人员
    getAll() {
      this.$axios
        .post(
          "/serveperson/" + this.pageIndex + "/" + this.pageSize,
          this.servePersonDTO
        )
        .then((res) => {
          console.log(res.data.data);
          this.total = res.data.data.total;
          this.pages = res.data.data.pages;
          this.servePersons = res.data.data.records;
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
    },

    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getAll();
    },
  },
};
</script>

<style>
</style>